<script setup lang="ts">
import { ref, onMounted } from "vue"
import { ElInput } from "element-plus"
import { $t } from '@vben/locales';
import BaseQuestion from "./base-question.vue"

defineOptions({ name: 'TrueFalse' })

const props = defineProps<{
  modelValue: any
}>()

const optionsInit = [
  { name: $t('questionBank.trueOption') },
  { name: $t('questionBank.falseOption') }
]

const baseRef = ref()

const init = () => { }

onMounted(() => {
  props.modelValue.options = []
  if (!props.modelValue.options || props.modelValue.options.length === 0) {
    props.modelValue.options = [...optionsInit]
  }
})

const getData = async () => {
  return await baseRef.value?.getData()
}

const validate = () => {
  return baseRef.value?.validate()
}

defineExpose({
  init,
  getData,
  validate,
  baseRef
})

</script>
<template>
  <BaseQuestion ref="baseRef" :optionsInit="optionsInit" :modelValue="modelValue">
    <template #options>
      <el-form-item :label="$t('questionBank.questionOptions')" prop="options">
        <div class="w-full flex gap-4">
          <el-input v-for="(item, i) in modelValue.options" :key="i" v-model="item.name" :placeholder="$t('common.inputPhTxt', ['选项内容'])"
            class="flex-1" readonly>
            <template #prepend>
              <div class="flex items-center justify-center text-sm font-medium">
                {{ i + 1 }}
              </div>
            </template>
          </el-input>
        </div>
      </el-form-item>
    </template>
  </BaseQuestion>
</template>
